<template>
  <!-- 数据源 数据分析 云端组态在用；  带多类型节点的树  企业 项目 网关 采集器 api  -->
  <div class="tree-list-container">
    <p class="tree-list-title custom-bottom-box-shadow">
      <i class="iconfont icon-shuangjiantouyou"></i> {{ treeData.title }}
    </p>
    <el-input v-model="filterText" s placeholder="输入名称过滤" class="tree-filter-box">
      <template #append>
        <el-button icon="iconfont icon-8" @click="filterText = ''">重置</el-button>
      </template>
    </el-input>
    <div class="tree-list-box">
      <el-tree
        ref="tree"
        node-key="id"
        default-expand-all
        :data="treeData.data"
        :props="treeData.defaultProps"
        :filter-node-method="filterNode"
        :default-expanded-keys="treeData.expandNodeId"
        @node-click="treeNodeHandleClick"
      >
        <template #default="{ node, data }">
          <div
            class="custom-tree-node"
            :class="{
              'active-tree-node': currentTreeNode.id === data.id,
              'disabled-node': data.disabled
            }"
          >
            <p class="c-t-label">
              <i class="iconfont t-node-icon" :class="data.iconClass"></i>
              <span class="c-t-name">{{ node.label }}</span>
            </p>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PDeviceTree',
  props: {
    treeData: {
      type: Object,
      default: function () {
        return {
          title: '项目列表',
          data: Array,
          isFilterTree: Boolean,
          treeNodeHandleClick: Function,
          expandNodeId: Array,
          defaultProps: Object
        }
      }
    },
    currentTreeNode: {
      type: Object
    }
  },
  data() {
    return {
      filterText: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    console.log(this.treeData, this.currentTreeNode, 'treeData')
  },

  methods: {
    // 树过滤
    filterNode(value, data) {
      if (!value) return true
      return data[this.treeData.defaultProps.label].indexOf(value) !== -1
    },
    // 点击树节点
    treeNodeHandleClick(data, b, vue) {
      this.treeData.treeNodeHandleClick(data, this.treeData)
    }
  }
}
</script>

<style lang="scss" scoped>
// 树样式
.tree-list-container {
  height: 100%;
  width: 100%;
  .tree-list-title {
    height: 35px;
    font-size: 14px;
    line-height: 35px;
    margin: -1px -1px 0 0;
    color: #00c6ff;
    padding: 0 10px;
    //   ;
    .icon-shuangjiantouyou {
      color: #00c6ff;
      margin-right: 10px;
    }
  }
  .tree-filter-box {
    padding: 0 10px;
    margin-top: 10px;
    .el-input-group__append {
      background: #10bc1e;
      color: #fff;
    }
  }
  .tree-list-box {
    height: calc(100% - 105px);
    margin-top: 10px;
    overflow-y: auto;
    padding-bottom: 10px;
    .filter-tree {
      height: 100%;
      overflow-y: auto;
      padding: 0 10px 5px 10px;
      // height: calc(100% - 50px);
      transition: height ease 1s;
    }
    .custom-tree-node {
      width: 100%;
      flex: 1;
      height: 40px;
      display: flex;
      font-size: 14px;
      padding-right: 8px;
      align-items: center;
      position: relative;
      overflow: hidden;
      justify-content: space-between;
      .c-t-label {
        margin: 0 0;
        width: 240px;
        overflow: hidden;
        white-space: nowrap;
        align-items: center;
        text-overflow: ellipsis;
        .t-node-icon {
          margin-right: 5px;
          font-size: 18px;
        }
        .icon-pingtai {
          color: rgb(235, 51, 195);
        }
        .icon-qiye {
          color: #32a769;
        }
        .icon-xiangmu1 {
          color: #25a1cf;
        }
        .icon-icon-test {
          color: #297fea;
        }
        .icon-API {
          color: #9446f7;
        }
        .icon-shebei2 {
          color: #f78046;
        }
      }
    }
    .active-tree-node {
      .c-t-label {
        .icon-pingtai {
          color: rgb(216, 0, 169);
        }
        .icon-qiye {
          color: rgb(28, 197, 107);
        }
        .icon-xiangmu1 {
          color: #0bb1ee;
        }
        .icon-icon-test {
          color: #3076f4;
        }
        .icon-API {
          color: rgb(135, 51, 245);
        }
        .icon-shebei2 {
          color: rgb(243, 99, 28);
        }
        .c-t-name {
          color: #fff;
          font-weight: 600;
        }
      }
    }
    .disabled-node {
      .c-t-label {
        .project-icon {
          color: #aaaaaa;
        }
        .c-t-name {
          color: #aaaaaa;
        }
      }
    }
  }
}
</style>
